body{
  background: #ccc;
}
.item , .item p.caption {
  box-sizing: border-box;
}
.item {
  float: left;
  opacity: 0.7;
  overflow: hidden;
  padding: 5px;
  padding-bottom: 0;
  border: 1px solid #ddd;
  border-radius: 5px;
  background:  white;
}

.item:hover {
  opacity: 1;
}
.item p.caption{
  margin: 0;
  padding: 5px 10px;
  line-height: 20px;
}

.item>img {
  box-shadow: 0 2px 3px #555; 
}
.item.horizontal>img {
  width: 100%;
}
.item.vertical>img {
  max-width: 100%;
}

.item.small.horizontal {
  width: 200px;
  height: 150px;
 
 >img {
   height: 110px;
 }
}

.item.small.vertical {
  width: 200px;
  height: 300px;
  
  >img {
    height: 260px;
  }
}


.item.medium.horizontal {
  width: 400px;
  height: 300px;
 
 >img {
   height: 260px;
 }
}

.item.medium.vertical {
  width: 400px;
  height: 600px;
  
  >img {
    height: 560px;
  }
}

.item.large.horizontal {
  width: 800px;
  height: 600px;
 
 >img {
   height: 560px;
 }
}

.item.large.vertical {
  width: 800px;
  height: 1200px;
  
  >img {
    max-height: 1160px;
  }
}
